<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2023-09-02 09:16:25
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-08-08 08:18:40
 * @FilePath: /things-admin/src/view/dataScreen/components/right_echarts/top.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="content">
    <div class="left">
      <div class="left_title">
        <div class="title">全国按摩椅数量TOP10</div>
        <img src="../../images/997.png" alt="" @click.stop="open" />
      </div>
      <div class="main_content">
        <div id="echarts_ten"></div>
      </div>
    </div>
    <!-- <div class="right">
      <div class="left_title">
        <div class="title">会员商城交易信息</div>
        <img src="../../images/997.png" alt="" />
      </div>
      <div id="echarts_eleven"></div>
    </div> -->
    <div class="tanchuang" v-show="isMask">
      <div class="left_copy">
        <div class="left_title">
          <div class="title">全国按摩椅数量排行</div>
          <div class="el-icon-circle-close" @click.stop="open"></div>
        </div>
        <div class="echarts">
          <div id="echarts_ten_copy"></div>
        </div>
      </div>
    </div>

    <div class="mask" v-show="isMask"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { provinceNumberStatistics } from "@/base/api/DataScreen.ts";
export default {
  data() {
    return {
      data_province: [], //全国排名前十的省份
      data_number: [], //数量
      data_province_copy: [], //全国省份
      data_number_copy: [], //数量
      provinceId: this.provinceId || "", //省份ID
      cityId: this.cityId || "", //城市ID
      name: this.name || "", //城市名称
      isMask: false // 是否放大弹窗
    };
  },
  props: ["provinceId", "cityId", "name"],
  watch: {
    provinceId(newval) {
      this.provinceId = newval;
    },
    cityId(newval) {
      this.cityId = newval;
    },
    name(newval) {
      if (newval) {
        this.name = newval;
        this.provinceNumberStatistics();
      }
    }
  },
  methods: {
    //复制信息
    cope() {},
    echartsTen() {
      let myChartTen = echarts.init(document.getElementById("echarts_ten"));
      let option = {
        tooltip: {
          trigger: "item",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow" // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        grid: {
          left: "8%",
          right: "15%",
          bottom: "3%",
          top: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 10
            }
          },
          axisLine: {
            show: false // 隐藏y轴轴线
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false // 隐藏y轴分隔线
          }
        },
        yAxis: {
          type: "category",
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 12
            }
          },
          data: this.data_province
        },
        series: [
          {
            name: "数量",
            type: "bar",
            stack: "total",
            label: {
              show: true,
              position: "right",
              color: "#FFFFFF"
            },
            itemStyle: {
              normal: {
                //柱状图渐变色设置
                color: function(params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#00C9FF" },
                      { offset: 1, color: "rgba(0,201,255,0)" }
                    ])
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                borderColor: "#00A5FF", // 设置柱子边框颜色为红色
                borderWidth: 1 // 设置柱子边框宽度为2
              }
            },
            barWidth: "50%", //柱子的宽度
            data: this.data_number
          }
        ]
      };
      myChartTen.setOption(option);
    },
    echartsTenCopy() {
      let myChartTen = echarts.init(
        document.getElementById("echarts_ten_copy")
      );

      let option = {
        tooltip: {
          trigger: "item",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow" // 'shadow' as default; can also be 'line' or 'shadow'
          },
          textStyle: {
            fontSize: 18,
            fontWeight: "bold"
          }
        },
        grid: {
          left: "8%",
          right: "5%",
          bottom: "3%",
          top: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 20
            }
          },
          axisLine: {
            show: false // 隐藏y轴轴线
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false // 隐藏y轴分隔线
          }
        },
        yAxis: {
          type: "category",
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 24
            }
          },
          data: this.data_province_copy
        },
        series: [
          {
            name: "数量",
            type: "bar",
            stack: "total",
            label: {
              show: true,
              position: "right",
              color: "#FFFFFF",
              fontSize: 20
            },
            itemStyle: {
              normal: {
                //柱状图渐变色设置
                color: function(params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#00C9FF" },
                      { offset: 1, color: "rgba(0,201,255,0)" }
                    ])
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                borderColor: "#00A5FF", // 设置柱子边框颜色为红色
                borderWidth: 1 // 设置柱子边框宽度为2
              }
            },
            barWidth: "50%", //柱子的宽度
            data: this.data_number_copy
          }
        ]
      };
      myChartTen.setOption(option);
    },
    // 开启放大弹窗
    open() {
      this.isMask = !this.isMask;
    },
    // 全国按摩椅TOP10
    provinceNumberStatistics() {
      provinceNumberStatistics(this.provinceId, this.cityId).then(res => {
        //  console.log(res,'-----------全国按摩椅排名');
        this.data_province = [];
        this.data_number = [];
        this.data_province_copy = [];
        this.data_number_copy = [];
        res.data.forEach((item, index) => {
          if (index <= 9) {
            // 能用三目运算少用if else
            item.province.slice(0, 2) == "黑龙"
              ? this.data_province.unshift(item.province.slice(0, 3))
              : this.data_province.unshift(item.province.slice(0, 2));
            this.data_number.unshift(item.count);
          }
          item.province.slice(0, 2) == "黑龙"
              ? this.data_province_copy.unshift(item.province.slice(0, 3))
              : this.data_province_copy.unshift(item.province.slice(0, 2));
          this.data_number_copy.unshift(item.count);
        });
        this.echartsTen();
        this.echartsTenCopy();
      });
    }
  },
  mounted() {
    this.provinceNumberStatistics();
  }
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
  .left {
    width: 448.5px;
    height: 320px;
    // background-color: #fff;
    margin-top: 10px;
    background: url(../../images/3487.png) no-repeat;
    background-size: cover;
    .left_title {
      width: 448.5px;
      height: 46px;
      display: flex;
      align-items: center;
      .title {
        width: 243px;
        height: 29px;
        font-size: 20px;
        font-weight: 500;
        color: #ffffff;
        line-height: 29px;
        margin: 0 150px 0 20px;
        position: relative;
        z-index: 999;
      }
      img {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    }
  }
  .left {
    #echarts_ten {
      width: 450px;
      height: 282px;
      //   background-color: #fff;
    }
  }
  .right {
    margin-left: 10.5px;
    .left_title {
      title {
        margin-right: 42px;
      }
    }
    // #echarts_eleven {
    //   width: 219px;
    //   height: 282px;
    // }
  }
  .mask {
    position: fixed;
    z-index: 99999998;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .tanchuang {
    position: fixed;
    z-index: 99999999;
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;

    background-color: #0a1632;
    .left_copy {
      width: 100%;
      height: 46px;
      background: url(../../images/Group3533@2x.png) no-repeat;
      background-size: cover;
      .left_title {
        display: flex;
        padding: 0 14px 0 21px;
        height: 46px;
        justify-content: space-between;
        align-items: center;
        .title {
          font-size: 24px;
          font-weight: 500;
          color: #ffffff;
        }
        div {
          display: inline-block;
          cursor: pointer;
          font-size: 24px;
          font-weight: 500;
          color: #ffffff;
        }
      }
      .echarts {
        overflow-y: auto;
        overflow-x: hidden;
        width: 100%;
        height: 664px;
        margin-top: 20px;
        #echarts_ten_copy {
          width: 1400px;
          height: 1664px;
          margin-top: -40px;
        }
      }
    }
  }
}
</style>
